import axios from 'axios';
import React, { useState, useEffect } from 'react'
import Bottom from '../components/Bottom';
import './Collect.css'
import Header from '../components/Header';

const Collect = () => {
    const [list, setList] = useState([]);
    const [lists, setLists] = useState([]);
    useEffect(() => {
        //比赛
        const url = "http://192.168.72.166:8080/api/getProductsCollectionMatchDatas";
        axios.get(url).then(res => {
            const data = res.data.data;
            data.forEach((item) => {
                setList((list) => [
                    ...list,
                    {
                        name: item.match_name,
                        id: item.match_id,
                        content: item.match_content
                    }

                ])

            });

        })
        //博物馆
        const urls = "http://192.168.72.166:8080/api/getProductsCollectionMuseumDatas";
        axios.get(urls).then(res => {
            const datas = res.data.data;
            datas.forEach((item) => {
                let img = "http://192.168.72.166:8080/" + item.museum_image;
                setLists((list) => [
                    ...list,
                    {
                        name: item.museum_name,
                        id: item.museum_id,
                        content: item.museum_brief_content,
                        img: img
                    }

                ])

            });

        })
    }, [])
    return (
        <div>
            <div className='collect'>
                <Header />

                <div className='collects'>
                    <h2>博物馆相关活动信息</h2>
                    <div className='collect_1'>
                        {
                            lists.map(item => {
                                if (item.id == 1 || item.id == 2 || item.id == 3) {
                                    return (
                                        <a href="http://localhost:3000/home/collect/museum">
                                            <div className='collect_1_1'>
                                                <img src={item.img} />
                                                <div>
                                                    <p>{item.name}</p>
                                                    <p>{item.content}</p>
                                                </div>
                                            </div>
                                        </a>
                                    )
                                } else {
                                    return (
                                        <div className='collect_1_2'>
                                            <img src={item.img} />
                                            <div>
                                                <p>{item.name}</p>
                                                <p>{item.content}</p>
                                            </div>
                                        </div>
                                    )
                                }
                            })
                        }

                    </div>
                    <h2>相关比赛信息</h2>
                    <div className='collect_2'>

                        {
                            list.map(item => {
                                if (item.id == 3) {
                                    return (
                                        <div className="collect_2_2">
                                            <h2>{item.name}</h2>
                                            <h3>{item.content}</h3>
                                        </div>
                                    )
                                } else {
                                    return (
                                        <div className="collect_2_1">
                                            <h2>{item.name}</h2>
                                            <h3>{item.content}</h3>
                                        </div>
                                    )
                                }
                            })
                        }

                    </div>
                </div>
            </div>
            <div className='collect_3'>
                <Bottom />
            </div>
        </div>
    )
}

export default Collect;